
<template>
	<view class="index" :style="pageStyle">
		<xsStorelist @load="storeLoad" ref="xsStorelist" />
		<view v-for="(item, index) in itemList" :key="index">
			<!-- 切换门店 -->
			<!-- 搜索 -->
			<xy-search v-if="item.type == 'search'" :data="item" />
			<!-- 轮播 -->
			<xy-banner v-if="item.type == 'banner'" :data="item" />
			<!-- 公告 -->
			<xy-notice v-if="item.type == 'notice'" :data="item" />
			<!-- 菜单 -->
			<xy-menu v-if="item.type == 'menu'" :data="item" />
			<!-- 商品 -->
			<xy-goods v-if="item.type == 'goods'" :data="item" />
			<!-- 图片 -->
			<xy-image v-if="item.type == 'image'" :data="item" />
			<!-- 视频 -->
			<xy-video v-if="item.type == 'video'" :data="item" />
			<!-- 标题 -->
			<xy-title v-if="item.type == 'title'" :data="item" /> 
			<!-- 空白行 --> 
			<view v-if="item.type == 'empty'" :style="'height:'+item.params.height+'rpx'" />
			<!-- 门店 -->
			<xy-store v-if="item.type == 'store'" :data="item.params" :lat="lat" :lng="lng" /> 
			<!-- 文字 -->
			<xy-text v-if="item.type == 'text'" :data="item" />
			<!-- 用户卡片 -->
			<xy-user-card v-if="item.type == 'user-card'" :data="item" v-on:showEwm="showEwm" />
			<!-- 钱包模块 -->
			<xy-user-wallet v-if="item.type == 'user-money'" :data="item" />
		</view>
		<xy-tabbar />
	</view>
</template>
<script>
	import xsStorelist from '@/components/xs-storelist';
	import xySearch from '@/components/xy-search';
	import xyBanner from '@/components/xy-banner';
	import xyNotice from '@/components/xy-notice';
	import xyMenu from '@/components/xy-menu';
	import xyImage from '@/components/xy-image';
	import xyVideo from '@/components/xy-video';
	import xyTitle from '@/components/xy-title';
	import xyTabbar from '@/components/xy-tabbar';
	import xyText from '@/components/xy-text';
	import xyStore from '@/components/xy-store';
	import xyGoods from '@/components/xy-goods';
	import xyUserCard from '@/components/xy-user/card';
	import xyUserWallet from '@/components/xy-user/wallet';
	export default {
		components: {
			xsStorelist,
			xyTabbar,
			xySearch,
			xyBanner,
			xyNotice,
			xyMenu,
			xyImage,
			xyVideo,
			xyTitle,
			xyStore,
			xyText,
			xyGoods,
			xyUserCard,
			xyUserWallet,
		},
		data() {
			return {
				css: {},
				lat:0,
				lng:0,
				isLoading:true,
				itemList:[],
				pageStyle:{},
				scenicList: [],      // 景区列表
				storeList: [],       // 门店列表
				currentScenic: null, // 当前选中景区
				currentStore: null   // 当前选中门店
			}
		},
		onPullDownRefresh() {
			this.loadData()
		},
		onLoad() {
			this.css = this.$xyfun.css();
		},
		onShow() {
			this.loadData();
		},
		methods: {
			loadData(){
				this.$api.get({
					url: '/common/template',
					loadingTip:'加载中...',
					data: {
						type:'index',
					},
					success: res => {
						uni.stopPullDownRefresh();
						this.isLoading = false;
						this.itemList = res.item;
						this.pageStyle = this.$xyfun.tcss(res.page)
						this.$xyfun.setNavBar(res.page.params.navigationBarTitleText,res.page.style.navigationBarBackgroundColor,res.page.style.navigationBarTextStyle);
					}
				});
			},
			storeLoad(){
				this.$xyfun.loc().then((res)=>{
				this.lat = res.latitude;
				this.lng = res.longitude;
				this.loadData();
			},()=>{
				this.loadData();
			})
			}
		}
	}
</script>
<style lang="scss">
	
	.index{
		padding-bottom: 100rpx;
	}
</style>
/* 弹窗样式 */
.popup-content {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  width: 80vw;
  max-height: 70vh;
}

.store-popup {
  width: 100vw;
  border-radius: 0 0 24rpx 24rpx;
}

.popup-header {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #eee;
  margin-bottom: 20rpx;
}

/* 景区列表 */
.scenic-list {
  max-height: 50vh;
}

.scenic-item {
  padding: 25rpx 15rpx;
  font-size: 32rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.scenic-item:last-child {
  border-bottom: none;
}

/* 门店列表 */
.store-list {
  max-height: 60vh;
}

.store-item {
  padding: 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.store-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15rpx;
}

.store-name {
  font-size: 34rpx;
  font-weight: bold;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.store-distance {
  color: #007AFF;
  font-size: 28rpx;
}

.store-info {
  display: flex;
  justify-content: space-between;
  font-size: 26rpx;
  color: #666;
}

.store-info text:last-child {
  color: #007AFF;
  text-decoration: underline;
}

/* 顶部门店显示 */
.top-store {
  position: fixed;
  top: 20rpx;
  right: 30rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 40rpx;
  padding: 8rpx 20rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  z-index: 999;
}

.top-store text {
  font-size: 28rpx;
  margin-right: 10rpx;
  max-width: 200rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>